<template>
  <div ref="ScrollRef" :class="classes || ''" class="scroll-box fit">
    <div class="v-scroll relative-position">
      <div :class="contentClass || ''" class="scroll-main absolute row no-wrap">
        <slot name="default"></slot>
      </div>
    </div>
    <q-resize-observer @resize="onResize" />
  </div>
</template>
<script setup>
import { dom } from 'quasar'
import { ref } from 'vue'

defineProps({ classes: String, contentClass: String })
const ScrollRef = ref(null)
const screenSize = ref({ width: 0, height: 0 })

const onResize = () => {
  const width = dom.width(ScrollRef.value), height = dom.height(ScrollRef.value)
  const padding = dom.style(ScrollRef.value, 'padding')
  if (padding === '0px') return (screenSize.value = { width, height })
  const paddings = padding.split(' ').map(i => Number(i.replace('px', '')))
  screenSize.value = { width: width - paddings[0] - paddings[2], height: height - paddings[1] - paddings[3] }
}
</script>
<style lang="scss" scoped>
.v-scroll {
  --w: calc(v-bind('`${screenSize.width}`') * 1px);
  --h: calc(v-bind('`${screenSize.height}`') * 1px);
  width: var(--h);
  height: var(--w);
  transform-origin: left top;
  transform: translateY(var(--h)) rotate(-90deg);
  overflow: hidden scroll;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

.scroll-main {
  width: var(--w);
  height: var(--h);
  left: var(--h);
  transform-origin: left top;
  transform: rotate(90deg);
}
</style>